<template>

	<view>
		<view class="page safe-bottom">
			<view class="content p-3 mb-5">
				<view class="bt-block">
					<bg-cell2 valueColor='#4e5969' label="项目名称" :value="obj.projectAddr"></bg-cell2>
					<bg-cell2 valueColor='#4e5969' label="项目地址" :value="obj.projectName"></bg-cell2>
					<bg-cell2 valueColor='#4e5969' label="考勤日期" :value="obj.createTime"></bg-cell2>
					<bg-cell2 valueColor='#4e5969' :border="false" label="考勤员" :value="obj.recordUserName"></bg-cell2>
				</view>
				<view class="bt-block mt-3">
					<view class="py-4 px-3" :class="[idx < obj.userList.length - 1 ? 'border-bottom' : '']" :key="idx"
						v-for="i, idx in obj.userList">
						<view class="font-14 mb-3">{{ i.userName }}</view>
						<view class="flex justify-between">
							<view class="flex align-center">
								<view style="width: 160rpx">
									<!-- <bg-label :options="dict.type.work_type" :value="i.workType"></bg-label> -->
									<bg-label v-if="i.salaryType == 1" :options="dict.type.work_type"
										:value="i.workType"></bg-label>
									<bg-label v-else :options="workTypeOptions" :value="i.workType"></bg-label>
								</view>
								<view>
									{{ i.workingHours }} 小时
								</view>
							</view>
							<view>
								<view class="small-btn" @click="gotoEdit(i)">
									修改
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- 班组长进行 对功处理 -->
			<view class="bt-footer" v-if="this.$auth.hasRoleOr(['team'])">
				<bg-btn @click="saveData">确认全部对工（共{{ obj.userList.length }}人）</bg-btn>
			</view>
		</view>
		<!-- 项目管理员在班组长对工完成后 进行审批 -->
		<view class="bt-block my-3" v-if="this.$auth.hasRoleOr(['project']) && authList.length > 0">
			<bg-title class="margin-top mx-3">
				<text class="font-1">流程节点图</text>
			</bg-title>
			<view class="p-3">
				<bg-step :list="authList"></bg-step>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="bt-footer bt-gap"
			v-if="obj.status == 1 && this.$auth.hasRoleOr(['project']) && obj.auditUserId == $store.getters.userId">
			<bg-btn plain @click="showReason = true">审批未通过</bg-btn>
			<bg-btn @click="audit(2)">审批通过</bg-btn>
		</view>
		<!-- 填写拒绝理由弹窗 -->
		<u-popup :show="showReason" @close="showReason = false" @open="showReason = true" :closeable="true" :round="10"
			mode="center">
			<view style="width: 720rpx; padding: 30rpx;">
				<view class="text-center font-15 font-bold mb-4">{{ '填写理由' }}</view>
				<u-textarea v-model="reason" placeholder="请输入拒绝理由"></u-textarea>
				<view class="bt-gap flex justify-around" style="margin-top: 60rpx;">
					<bg-btn @click="showReason = false"
						style="height:90rpx; color: #86898c;background-color: #fafafa; border: none;">取消</bg-btn>
					<bg-btn @click="ReasonConfirm" style="height:90rpx">确定</bg-btn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	getAttend,
	checkAttend,
	attendanceAudit
} from "@/api/attend.js"
export default {
	dicts: ['work_type'],
	data() {
		return {
			serialId: '',
			obj: {
				userList: []
			},
			authList: [],
			// 拒绝弹窗
			showReason: false,
			reason: '',
			workTypeOptions: [{ label: '月工', value: 1 }, { label: '加班', value: 2 }]
		}
	},
	onLoad(options) {
		this.serialId = options.id
		this.getData()
	},
	// onShow() {
	// 	this.getData()
	// },
	computed: {
		nameStr() {
			if (this.obj && this.obj.userList) {
				return this.obj.userList.map(u => u.userName).join(',')
			}
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		getData() {
			getAttend(this.serialId).then(res => {
				this.obj = res.data

				this.obj.userList.forEach(item => {
					console.log('item', item);

					this.$set(item, "workType", this.obj.workType)
					// 注释掉这行，保留用户原始的工作时长数据
					// this.$set(item, "workingHours", this.obj.workingHours)
				})
				console.log('this.obj', this.obj.userList);

				if (this.obj.auditRecordList.length > 0) {
					// 新增
					this.authList = [{
						auditUserName: this.obj.recordUserName,
						auditTime: this.obj.createTime
					},
					...this.obj.auditRecordList
					]
				}

			})
		},
		gotoEdit(i) {
			uni.navigateTo({
				url: "/pages/attendance/record/edit",
				events: {
					// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					acceptDataFromOpenedPage: (data) => {
						let item = this.obj.userList.find(_item => {
							_item.attendanceId == data.attendanceId
						})
						if (item) {
							item.workType = data.workType
							item.workingHours = data.workingHours
						}
						// 直接更新当前编辑的用户对象
						// i.workType = data.workType
						// i.workingHours = data.workingHours
						// console.log('data',data);
						console.log('item', item);
					},
				},
				success: (res) => {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('acceptDataFromOpenerPage', {
						obj: this.obj,
						item: i
					})
				}
			})
		},
		saveData() {
			// console.log('obj',this.obj);
			// return
			checkAttend(this.obj.userList).then(res => {
				uni.$emit("refresh-page", true)
				this.$modal.msg("确定成功")
				this.$tab.navigateBackDelay()
			})
		},
		audit(status) {
			console.log(this.obj.auditId);
			let method = null
			if (this.$auth.hasRole("project")) {
				method = attendanceAudit
			}
			if (method) {
				let obj = {
					id: this.obj.auditId,
					status: status,
					checkAttendanceParamList: this.obj.userList

				}
				// if (status == 2) {
				// 	obj.checkAttendanceParamList = this.obj.userList
				// }
				if (status == 3) {
					obj.reason = this.reason
				}
				method(obj).then(res => {
					this.$modal.msg('审批成功')
					uni.$emit("refresh-settle", true)
					this.$tab.navigateBackDelay()
				})
			}
		},
		ReasonConfirm() {
			if (this.reason.trim() == '') {
				this.$modal.msg('请输入拒绝理由')
				return
			}
			this.showReason = false
			this.audit(3)
		}
	}
}
</script>

<style></style>